<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts::header"></head>
<body>

<nav th:replace="layouts::navbar"></nav>

 <div class="container">

     <h3>主面板</h3>
     <p th:text="${versionNumber}"></p>
     <hr>
     <h4>当前项目</h4>
     <div class="row">
         <div class="col-md-6">
             <table class="table table-bordered table-striped">
                 <thead class="thead-dark">
                 <tr>
                     <th>项目名称</th>
                     <th>项目状态</th>
                 </tr>
                 </thead>
                 <tbody>
                 <tr th:each="aProject : ${projects}">
                     <td th:text="${aProject.name}"></td>
                     <td th:text="${aProject.stage}"></td>
                 </tr>
                 </tbody>
             </table>
         </div>
         <div class="col-mod-4">
             <canvas id="myPieChart" height="50" width="50"></canvas>

             <script>
                 let charData = "[[${projectStatusData}]]"
             </script>
     </div>
 </div>

 </div>

<h4>当前学生</h4>
<div class="row">
    <div class="col-md-6">
<table class="table table-bordered table-striped">
    <thead class="thead-dark">
    <tr>
        <th>学生姓名</th>
        <th>微信号</th>
        <th>项目个数</th>
    </tr>
    </thead>
    <tbody>
    <!--/*@thymesVar id="studentProjects" type="aj"*/-->
    <tr th:each="aStudent : ${studentProjects}">
        <td th:text="${aStudent.name}"></td>
        <td th:text="${aStudent.wechatId}"></td>
        <td th:text="${aStudent.projectCount}"></td>
    </tr>
    </tbody>
    </table>
    </div>
</div>
</div>
<script type="text/javascript" th:src="@{js/myChart.js}"></script>
</body>
</html>